<template>
    <div>
        <el-form-item label="添加测试账户">
            <div class="member_box">
                <div class="head_stra flexbox flexcenter">
                    <div class="has_check flexbox flexcenter flexbetween" v-if="hasPlanData.length>0">
                        <div class="has_ch_left">
                            <span class="has_text">已选中{{hasPlanData.length}}项</span>
                            <span class="has_btn" @click="batchDeletPlan">删除</span>
                        </div>
                        <div class="close_check" @click="closeHasPlanCheck">
                            <img src="../../assets/img/close_check.svg" alt="">
                        </div>
                    </div>
                    <div class="flexbox flex flexcenter flexbetween" v-else>
                        <div class="font_14 color_01">测试账户列表</div>
                        <el-button plain class="plain_blue" icon="el-icon-circle-plus-outline" size="small" @click="addProUser()">添加账户</el-button>
                    </div>
                </div>
                <el-table :data="addForm.two.advertiser_id" ref="planRef" max-height="300" class="com_table" :row-key="(row)=>{ return row.advertiser_id}" @selection-change="selectGroup">
                    <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                        <img src="../../assets/img/null_icon.svg" alt="">
                        <div class="font_13 color_03">暂无数据</div>
                    </div>
                    <el-table-column type="selection" width="55" align="center" :reserve-selection="true">
                    </el-table-column>
                    <el-table-column prop="advertiser_id" label="账户ID" width="250">
                    </el-table-column>
                    <el-table-column prop="name" label="账户名称">
                    </el-table-column>
                    <el-table-column prop="stat_cost" label="操作" width="88">
                        <template slot-scope="scope">
                            <el-link type="danger" :underline="false" @click="deletPlan(scope.$index)">删除</el-link>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-form-item>
        <el-form-item label="执勤优化师">
            <div class="member_box">
                <div class="font_13 color_02">请选择负责该项目的优化师</div>
                <div class="flexbox flexcenter member_item" v-for="(item,index) in addForm.two.user_id" :key="index">
                    <el-form-item :prop="`two.user_id.${index}`">
                        <el-select v-model="addForm.two.user_id[index]" filterable placeholder="请选择人员" style="width:220px" @change="setSessionStorage">
                            <el-option :label="item.nickname" :value="item.id" v-for="item in opmList" :key="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <div class="icon_btn" @click="delOpm(index)" v-if="addForm.two.user_id.length>1"><img src="../../assets/img/del_icon2.svg" alt=""></div>
                </div>
                <el-button size="medium" style="margin-top:12px" type="text" icon="el-icon-plus" @click="addOpm">添加优化师</el-button>
            </div>
        </el-form-item>
        <el-form-item label="评分设置">
            <div class="pf_box">
                <div class="flexbox flexcenter bd_1 pf_item" v-for="(item,index) in addForm.two.score" :key="index">
                    <div class="pf_tag flexbox flexcenter zong" v-if="item.stage==1">
                        <img src="../../assets/img/pf_tag3.svg" alt="">
                        S 级素材
                    </div>
                    <div class="pf_tag flexbox flexcenter blue" v-else-if="item.stage==2">
                        <img src="../../assets/img/pf_tag4.svg" alt="">
                        A 级素材
                    </div>
                    <div class="pf_tag flexbox flexcenter yellow" v-else-if="item.stage==-1">
                        <img src="../../assets/img/pf_tag2.svg" alt="">
                        淘汰素材
                    </div>
                    <span class="font_14 color_01">消耗大于：</span>
                    <el-form-item :prop="`two.score.${index}.cost`">
                        <el-input v-model="item.cost" placeholder="请输入消耗" style="width:140px" @change="setSessionStorage">
                            <i slot="prefix" style="font-style:normal;color:#17233D;margin-left:5px">￥</i>
                        </el-input>
                    </el-form-item>
                    <span class="font_14 color_01" style="margin-left:14px">ROI{{item.stage==-1?"小于":"大于"}}：</span>
                    <el-form-item :prop="`two.score.${index}.roi`">
                        <el-input v-model="item.roi" placeholder="请输入ROI" style="width:140px" @change="setSessionStorage">
                        </el-input>
                    </el-form-item>
                </div>
            </div>
        </el-form-item>
        <el-form-item label="删除计划设置">
            <div class="pf_box">
                <div>
                    <div class="flexbox flexcenter pf_item sc_item" v-for="(item,index) in addForm.two.del" :key="index">
                        <div class="font_14 color_01">计划创建时间</div>
                        <el-form-item :prop="`one.del.${index}.create_day`" class="mt_l5">
                            <el-input v-model="item.create_day" placeholder="请输入" style="width:120px" @change="setSessionStorage">
                                <i slot="suffix" style="font-style:normal;color:#17233D;margin-right:5px">天前</i>
                            </el-input>
                        </el-form-item>
                        <div class="font_14 color_01 mt_l5">账户近</div>
                        <el-form-item :prop="`two.del.${index}.recentlyday`" class="mt_l5">
                            <el-input v-model="item.recentlyday" placeholder="请输入" style="width:120px" @change="setSessionStorage">
                                <i slot="suffix" style="font-style:normal;color:#17233D;margin-right:5px">天</i>
                            </el-input>
                        </el-form-item>
                        <el-form-item :prop="`two.del.${index}.del_type`" class="mt_l5">
                            <el-select v-model="item.del_type" placeholder="" style="width:120px" @change="setSessionStorage">
                                <el-option :label="item2.name" :value="item2.del_type" v-for="item2 in delType" :key="item2.del_type"></el-option>
                            </el-select>
                        </el-form-item>
                        <div class="font_14 color_01 mt_l5">累计消耗大于</div>
                        <el-form-item :prop="`two.del.${index}.cost`" class="mt_l5">
                            <el-input v-model="item.cost" placeholder="请输入消耗" style="width:120px" @change="setSessionStorage">
                                <i slot="prefix" style="font-style:normal;color:#17233D;margin-left:5px">￥</i>
                            </el-input>
                        </el-form-item>
                        <div class="font_14 color_01 mt_l5">且ROI低于</div>
                        <el-form-item :prop="`two.del.${index}.roi`" class="mt_l5">
                            <el-input v-model="item.roi" placeholder="请输入ROI" style="width:120px" @change="setSessionStorage">
                            </el-input>
                        </el-form-item>
                        <div class="font_14 color_01 mt_l5">的计划，执行<span style="color:#FE6262"> 删除 </span>操作</div>
                        <div class="icon_btn mt_l5" @click="delDel(index)" v-if="addForm.two.del.length>1"><img src="../../assets/img/del_icon2.svg" alt=""></div>
                    </div>
                </div>
                <el-button size="medium" type="text" icon="el-icon-plus" @click="addDel">添加规则设置</el-button>
            </div>
        </el-form-item>
        <el-form-item label="二阶复测设置">
            <div class="pf_box">
                <div class="flexbox flexcenter pf_item sc_item" v-for="(item,index) in addForm.two.repeat" :key="index">
                    <div class="font_14 color_01">发布时间为</div>
                    <el-form-item :prop="`two.repeat.${index}.day`" class="mt_l5">
                        <el-input v-model="item.day" placeholder="请输入消耗" style="width:120px" @change="setSessionStorage">
                            <i slot="suffix" style="font-style:normal;color:#17233D;margin-right:5px">天</i>
                        </el-input>
                    </el-form-item>
                    <div class="font_14 color_01 mt_l5">且近</div>
                    <el-form-item :prop="`two.repeat.${index}.recentlyday`" class="mt_l5">
                        <el-input v-model="item.recentlyday" placeholder="请输入" style="width:120px" @change="setSessionStorage">
                            <i slot="suffix" style="font-style:normal;color:#17233D;margin-right:5px">天</i>
                        </el-input>
                    </el-form-item>
                    <div class="font_14 color_01 mt_l5">累计总消耗低于</div>
                    <el-form-item :prop="`two.repeat.${index}.cost`" class="mt_l5">
                        <el-input v-model="item.cost" placeholder="请输入消耗" style="width:120px" @change="setSessionStorage">
                            <i slot="prefix" style="font-style:normal;color:#17233D;margin-left:5px">￥</i>
                        </el-input>
                    </el-form-item>
                    <div class="font_14 color_01 mt_l5">且ROI低于</div>
                    <el-form-item :prop="`two.repeat.${index}.roi`" class="mt_l5">
                        <el-input v-model="item.roi" placeholder="请输入ROI" style="width:120px" @change="setSessionStorage">
                            <i slot="prefix" style="font-style:normal;color:#17233D;margin-left:5px">￥</i>
                        </el-input>
                    </el-form-item>
                    <div class="font_14 color_01 mt_l5">的素材，执行<span style="color:#4475FF"> 复测 </span>操作</div>
                </div>
            </div>
        </el-form-item>
        <el-form-item label="潜力保护设置">
            <div class="pf_box">
                <div class="flexbox flexcenter pf_item sc_item" v-for="(item,index) in addForm.two.protect" :key="index">
                    <div class="font_14 color_01">进入评级的素材保护期为</div>
                    <el-form-item prop="media_worker" class="mt_l5">
                        <el-input v-model="item.day" placeholder="请输入" style="width:120px" @change="setSessionStorage">
                            <i slot="suffix" style="font-style:normal;color:#17233D;margin-right:5px">天</i>
                        </el-input>
                    </el-form-item>
                </div>
            </div>
        </el-form-item>
    </div>
</template>

<script>
import "@/assets/css/video.css";
export default {
    props: ["addForm", "delType", "opmList"],
    name: "",
    data() {
        return {
            hasPlanData: [],
        };
    },
    created() {},
    methods: {
        setSessionStorage(){
            this.$emit("setSessionStorage")
        },
        addProUser() {
            this.$emit("addProUser", 2);
        },

        // 删除
        deletPlan(index) {
            this.addForm.two.advertiser_id.splice(index, 1);
            this.setSessionStorage()
        },
        // 批量删除
        batchDeletPlan() {
            for (let i in this.addForm.two.advertiser_id) {
                for (let a in this.hasPlanData) {
                    if (
                        this.addForm.two.advertiser_id[i].advertiser_id ==
                        this.hasPlanData[a].advertiser_id
                    ) {
                        this.addForm.two.advertiser_id.splice(i, 1);
                    }
                }
            }
            this.hasPlanData = [];
            this.$refs.planRef.clearSelection();
            this.setSessionStorage()
        },
        // 选择
        selectGroup(v) {
            this.hasPlanData = v;
        },
        // 关闭已选
        closeHasPlanCheck() {
            this.hasPlanData = [];
            this.$refs.planRef.clearSelection();
        },

        // 添加优化师
        addOpm() {
            this.addForm.two.user_id.push("");
            this.setSessionStorage()
        },
        // 删除优化师
        delOpm(index) {
            this.addForm.two.user_id.splice(index, 1);
            this.setSessionStorage()
        },

        // 添加删除计划
        addDel() {
            this.addForm.two.del.push({
                cost: "",
                roi: "",
                recentlyday: "",
                create_day:"",
                del_type: 1,
            });
            this.setSessionStorage()
        },
        // 删除计划
        delDel(index) {
            this.addForm.two.del.splice(index, 1);
            this.setSessionStorage()
        },
    },
    components: {},
};
</script>




